import {createRouter, createWebHistory} from 'vue-router'
import {useRouteStore} from '@/stores'

// 默认布局
const Layout = () => import('@/layout/index.vue')

export const constantRoutes = [
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        meta: {hidden: true}
    },
    {
        path: '/',
        name: 'Home',
        component: Layout,
        redirect: '/home',
        meta: {hidden: false},
        children: [
            {
                path: '/home',
                component: () => import('@/views/home/index.vue'),
                name: 'HomeIndex',
                meta: {
                    title: '首页',
                    icon: 'House',
                    svgIcon: 'menu-home',
                    affix: true,
                    hidden: false,
                    breadcrumb: false
                }
            }
        ]
    },
    {
        path: '/echarts',
        name: 'Echarts',
        component: Layout,
        redirect: '/echarts/index',
        meta: {hidden: false},
        children: [
            {
                path: '/echarts/index',
                component: () => import('@/views/echarts/index.vue'),
                name: 'EchartsIndex',
                meta: {
                    title: 'Echarts案例',
                    icon: 'DataAnalysis',
                    svgIcon: 'menu-home',
                    affix: false,
                    hidden: false,
                    breadcrumb: false
                }
            },
        ]
    },
    {
        path: '/canvas',
        name: 'Canvas',
        component: Layout,
        redirect: '/canvas/index',
        meta: {hidden: false},
        children: [
            {
                path: '/canvas/index',
                component: () => import('@/views/canvas/index.vue'),
                name: 'CanvasIndex',
                meta: {
                    title: 'Canvas案例',
                    icon: 'DataAnalysis',
                    svgIcon: 'menu-home',
                    affix: false,
                    hidden: false,
                    breadcrumb: false
                }
            },
        ]
    },
    {
        path: '/video',
        name: 'Video',
        component: Layout,
        redirect: '/video/index',
        meta: {hidden: false},
        children: [
            {
                path: '/video/index',
                component: () => import('@/views/video/index.vue'),
                name: 'VideoIndex',
                meta: {
                    title: '西瓜视频播放器',
                    icon: 'DataAnalysis',
                    svgIcon: 'menu-home',
                    affix: false,
                    hidden: false,
                    breadcrumb: false
                }
            },
        ]
    },
    {
        path: '/xianlutu',
        name: 'Xianlutu',
        component: Layout,
        redirect: '/xianlutu/index',
        meta: {hidden: false},
        children: [
            {
                path: '/xianlutu/index',
                component: () => import('@/views/xianlutu/index.vue'),
                name: 'XianlutuIndex',
                meta: {
                    title: '线路图',
                    icon: 'DataAnalysis',
                    svgIcon: 'menu-home',
                    affix: false,
                    hidden: false,
                    breadcrumb: false
                }
            },
        ]
    },
    {
        path: '/ditu',
        name: 'Ditu',
        component: Layout,
        redirect: '/ditu/index',
        meta: {hidden: false},
        children: [
            {
                path: '/ditu/index',
                component: () => import('@/views/ditu/index.vue'),
                name: 'DituIndex',
                meta: {
                    title: '地图',
                    icon: 'DataAnalysis',
                    svgIcon: 'menu-home',
                    affix: false,
                    hidden: false,
                    breadcrumb: false
                }
            },
        ]
    },
    {
        path: '/bingtu',
        name: 'Bingtu',
        component: Layout,
        redirect: '/bingtu/index',
        meta: {hidden: false},
        children: [
            {
                path: '/bingtu/index',
                component: () => import('@/views/bingtu/index.vue'),
                name: 'BingtuIndex',
                meta: {
                    title: '饼图',
                    icon: 'DataAnalysis',
                    svgIcon: 'menu-home',
                    affix: false,
                    hidden: false,
                    breadcrumb: false
                }
            },
        ]
    },
    {
        path: '/rrweb',
        name: 'Rrweb',
        component: Layout,
        redirect: '/rrweb/index',
        meta: {hidden: false, title: 'rrweb案例', icon: 'DataAnalysis',},
        children: [
            {
                path: '/rrweb/index',
                component: () => import('@/views/rrweb/index.vue'),
                name: 'RrwebIndex',
                meta: {
                    title: 'rrweb案例',
                    icon: 'DataAnalysis',
                    svgIcon: 'menu-home',
                    affix: false,
                    hidden: false,
                    breadcrumb: false
                }
            },
        ]
    },
]

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: constantRoutes,
    scrollBehavior: () => ({left: 0, top: 0})
})

/**
 * @description 重置路由
 * @description 注意：所有动态路由路由必须带有name属性，否则可能会不能完全重置干净
 */
export function resetRouter() {
    try {
        const routeStore = useRouteStore()
        routeStore.asyncRoutes.forEach((route) => {
            const {name} = route
            if (name) {
                router.hasRoute(name) && router.removeRoute(name)
            }
        })
    } catch (error) {
        // 强制刷新浏览器也行，只是交互体验不是很好
        window.location.reload()
    }
}


export default router
